﻿@using System.Globalization;
@{
    foreach (var item in PopupOptions)
    {
        <div @key="item.ZIndex" style="position:absolute;left:@(item.Position.X)px;top:@(item.Position.Y)px;z-index:@item.ZIndex;">
            @item.Content
        </div>
    }
    for (int i = 0; i < Messages.Count; i++)
    {
        var message = Messages[i];
        var index = message.ZIndex;
        var clsBuilder = HtmlPropertyBuilder.CreateCssClassBuilder()
           .Add("el-message", $"el-message--{message.Type.ToString().ToLower()}");
        var styleBuilder = HtmlPropertyBuilder.CreateCssStyleBuilder()
            .Add($"top:{message.BeginTop}px", "opacity:0", $"z-index:{index}");
        var firstStyleBuilder = HtmlPropertyBuilder.CreateCssStyleBuilder()
            .Add($"top:{message.EndTop}px")
            .Add("opacity:1");
        var secondStyleBuilder = HtmlPropertyBuilder.CreateCssStyleBuilder()
            .Add($"top:{message.BeginTop}px", "opacity:0");
        <BTransition role="alert" Cls="@clsBuilder.ToString()" OnAllEnd="e=>DisposeMessage(message)" InitialStyle="@styleBuilder.ToString()">
            <Path>
                <BTransitionPath Style="@firstStyleBuilder.ToString()" Delay="200" Duration="300"></BTransitionPath>
                <BTransitionPath Style="@secondStyleBuilder.ToString()" Delay="3000" Duration="300"></BTransitionPath>
            </Path>
            <Content>
                <i class="el-message__icon el-icon-@(message.Type.ToString().ToLower())"></i>
                <p class="el-message__content">@message.Message</p>
            </Content>
        </BTransition>
    }
    for (int i = 0; i < LoadingOptions.Count; i++)
    {
        var option = LoadingOptions[i];
        <div class="el-loading-mask" style="background-color: @option.Background;display:none;z-index;@(option.ZIndex)" @ref="option.Element">
            <div class="el-loading-spinner">
                @if (string.IsNullOrWhiteSpace(option.IconClass))
                {
                    <svg viewBox="25 25 50 50" class="circular">
                        <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
                    </svg><!---->
                }
                else
                {
                    <i class="@option.IconClass"></i>
                    <p class="el-loading-text">@option.Text</p>
                }
            </div>
        </div>
    }

    for (int i = 0; i < DialogOptions.Count; i++)
    {
        var option = DialogOptions[i];
        var shadowIndex = option.ShadowZIndex;
        var index = option.ZIndex;

        if (option.IsDialog)
        {
            var width = string.Empty;

            if (option.Width > 0)
            {
                width = $"width:{option.Width}px;";
            }
            var clsBuilder = HtmlPropertyBuilder.CreateCssClassBuilder()
                .Add("el-dialog")
                .AddIf(option.FullScreen, "is-fullscrren");
            var styleBuilder = HtmlPropertyBuilder.CreateCssStyleBuilder()
                .Add("opacity:0", "top:10px")
                .Add(width);
            <div @key="option" class="el-dialog__wrapper" style="z-index: @index;">
                <BTransition role="dialog" OnAllEnd="()=> DialogAnimationEndAsync(option)" OnPause="e=>OnPauseAsync(option)" @ref="option.Element" AutoAdjustPosition="true" aria-modal="true" aria-label="@option.Title" Cls="@clsBuilder.ToString()" InitialStyle="@styleBuilder.ToString()">
                    <Path>
                        <BTransitionPath top="10vh" opacity="1" Delay="200" Duration="300"></BTransitionPath>
                        <BTransitionPath top="10px" opacity="0" Duration="300" Pause="true"></BTransitionPath>
                    </Path>
                    <Content>
                        <div class="el-dialog__header">
                            <span class="el-dialog__title">@option.Title</span>
                            <BButton Icon="el-dialog__close el-icon el-icon-close" Cls="el-dialog__headerbtn" AppendCustomCls="false" OnClick="(e => CloseDialogAsync(option,
                                            new DialogResult()
                                            {
                                            }))">
                            </BButton>
                        </div>
                        <div class="el-dialog__body">
                            <BDynamicComponent Component="option.Content" Parameters="option.Parameters"></BDynamicComponent>
                        </div>
                        @if (option.Buttons.Any())
                        {
                            <div class="el-dialog__footer">
                                <span class="dialog-footer">
                                    @foreach (var button in option.Buttons)
                                    {
                                        @button
                                    }
                                </span>
                            </div>
                        }
                    </Content>
                </BTransition>
            </div>
            @if (option.IsModal)
            {
                ShadowCount++;
                var shadowStyle = HtmlPropertyBuilder.CreateCssStyleBuilder()
                    .Add("opacity:0", "position:fixed")
                    .Add($"z-index:{shadowIndex}");
                var firstStyle = HtmlPropertyBuilder.CreateCssStyleBuilder()
                    .Add($"opacity:{(ShadowCount == 0 ? 0 : 0.5)}");
                <BTransition InitialStyle="@shadowStyle.ToString()" @ref="option.ShadowElement" Cls="v-modal">
                    <Path>
                        <BTransitionPath Style="@firstStyle.ToString()" Delay="300" Duration="200"></BTransitionPath>
                        <BTransitionPath opacity="0" Duration="300" Pause="true"></BTransitionPath>
                    </Path>
                    <Content></Content>
                </BTransition>
            }
        }
        else
        {
            ShadowCount++;
            var layerSyleBuilder = HtmlPropertyBuilder.CreateCssStyleBuilder()
   .AddIf(option.Point != System.Drawing.Point.Empty, $"left:{option.Point.X}px;", $"top:{option.Point.Y}px");
            var messageBoxStyleBuilder = HtmlPropertyBuilder.CreateCssClassBuilder()
                .AddIf(option.Point == System.Drawing.Point.Empty, "el-message-box");

            <div tabindex="-1" role="dialog" aria-modal="true" aria-label="@option.Title" class="el-message-box__wrapper" style="z-index: @index">
                <div class="@messageBoxStyleBuilder.ToString()" style="@layerSyleBuilder.ToString()">
                    @if (!string.IsNullOrWhiteSpace(option.Title))
                    {
                        <div class="el-message-box__header">
                            <div class="el-message-box__title">
                                <!---->
                                <span>@option.Title</span>
                            </div>
                            <BButton Icon="el-message-box__close el-icon-close" Cls="el-message-box__headerbtn" AppendCustomCls="false" OnClick="(e => CloseDialogAsync(option, new DialogResult()
                                                                                                                                                 {
                                                                                                                                                     Result = MessageBoxResult.Close
                                                                                                                                                 }))">
                            </BButton>
                        </div>
                    }
                    @if (option.Point == System.Drawing.Point.Empty)
                    {
                        <div class="el-message-box__content">
                            <!---->
                            <div class="el-message-box__message">
                                <p><BDynamicComponent Component="option.Content"></BDynamicComponent></p>
                            </div>
                            <div class="el-message-box__input" style="display: none;">
                                <div class="el-input">
                                    <!---->
                                    <input type="text" autocomplete="off" placeholder="" class="el-input__inner">
                                </div>
                                <div class="el-message-box__errormsg" style="visibility: hidden;"></div>
                            </div>
                        </div>
                        <div class="el-message-box__btns">
                            @foreach (var button in option.Buttons)
                            {
                                @button
                            }
                        </div>
                    }
                    else
                    {
                        <BDynamicComponent Component="option.Content"></BDynamicComponent>
                    }
                </div>
            </div>
            @if (option.IsModal)
            {
                <div class="v-modal" tabindex="0" style="z-index: @shadowIndex;transition:opacity 0.3s;opacity:@(ShadowCount == 0 ? "0" : "0.5");position:fixed;"></div>
            }
        }
    }

    for (int i = 0; i < DateTimePickerOptions.Count; i++)
    {
        var option = DateTimePickerOptions[i];
        var shadowIndex = option.ShadowZIndex;
        var index = option.ZIndex;
        var year = option.CurrentMonth.Year;
        var month = option.CurrentMonth.Month;
        var calendar = CultureInfo.InvariantCulture.Calendar;
        var dayOfThisMonthStart = new DateTime(year, month, 1);
        var dayOfThisMonthEnd = dayOfThisMonthStart.AddMonths(1).AddDays(-1);
        var dayOfWeekOfThisMonthStart = calendar.GetDayOfWeek(dayOfThisMonthStart);
        var dayOfWeekOfThisMonthEnd = calendar.GetDayOfWeek(dayOfThisMonthEnd);
        var days = calendar.GetDaysInMonth(year, month);
        var currentRenderingDay = 0;
        var dayIndexOfMonthStart = 0;
        var left = option.Left > 0 ? $"{option.Left}px" : string.Empty;
        var top = option.Top > 0 ? $"{option.Top}px" : string.Empty;
        var opacity = 0;
        var display = "none";
        if (option.Left > 0)
        {
            opacity = 1;
            display = "";
        }
        var prefix = string.Empty;
        var beginYear = 0;
        var endYear = 0;
        if (option.ShowYear > 0)
        {
            prefix = option.ShowYear.ToString().Substring(0, 3);
            beginYear = Convert.ToInt32(prefix + "0");
            endYear = Convert.ToInt32(prefix + "9");
        }
        <div class="el-picker-panel el-date-picker el-popper" style="left:@left;top:@top; z-index: @index; position: absolute;transition:top 0.3s,opacity 0.3s;display:@display;opacity:@opacity;" x-placement="bottom-start" @ref="option.Element">
            <div class="el-picker-panel__body-wrapper">
                <div class="el-picker-panel__body">
                    <div class="el-date-picker__header">
                        <BButton Cls="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left" AppendCustomCls="false" OnClick="e=>GoPrevYear(option)"></BButton>
                        @if (option.ShowYear == 0 && option.ShowMonth == 0)
                        {
                            <BButton Cls="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-arrow-left" AppendCustomCls="false" OnClick="e => option.CurrentMonth = option.CurrentMonth.AddMonths(-1)"></BButton>
                        }
                        @if (option.ShowYear == 0 && option.ShowMonth == 0)
                        {
                            <span role="button" class="el-date-picker__header-label" @onclick="e => { option.ShowYear = year; option.ShowMonth = 0; }">@year 年</span>
                            <span role="button" class="el-date-picker__header-label" @onclick="e => { option.ShowMonth = month; option.ShowYear = 0; }">@month 月</span>
                        }
                        else if (option.ShowYear == 0)
                        {
                            <span role="button" class="el-date-picker__header-label" @onclick="e => { option.ShowYear = year; option.ShowMonth = 0; }">@year 年</span>
                        }
                        else
                        {
                            <span role="button" class="el-date-picker__header-label">@beginYear - @endYear 年</span>
                        }
                        @if (option.ShowYear == 0 && option.ShowMonth == 0)
                        {
                            <BButton Cls="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-arrow-right" AppendCustomCls="false" OnClick="e => option.CurrentMonth = option.CurrentMonth.AddMonths(1)"></BButton>
                        }
                        <BButton Cls="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right" AppendCustomCls="false" OnClick="e=>GoNextYear(option)"></BButton>
                    </div>
                    <div class="el-picker-panel__content">
                        @if (option.ShowMonth > 0)
                        {
                            <table class="el-month-table">
                                <tbody>
                                    <tr>
                                        <td class="@(option.ShowMonth==1 ? "today":string.Empty)" @onclick="e=>OpenMonth(option,1)">
                                            <div>
                                                <a class="cell">一月</a>
                                            </div>
                                        </td>
                                        <td class="@(option.ShowMonth==2 ? "today":string.Empty)" @onclick="e=>OpenMonth(option,2)"><div><a class="cell">二月</a></div></td>
                                        <td class="@(option.ShowMonth==3 ? "today":string.Empty)" @onclick="e=>OpenMonth(option,3)"><div><a class="cell">三月</a></div></td>
                                        <td class="@(option.ShowMonth==4 ? "today":string.Empty)" @onclick="e=>OpenMonth(option,4)"><div><a class="cell">四月</a></div></td>
                                    </tr>
                                    <tr>
                                        <td class="@(option.ShowMonth==5 ? "today":string.Empty)" @onclick="e=>OpenMonth(option,5)"><div><a class="cell">五月</a></div></td>
                                        <td class="@(option.ShowMonth==6 ? "today":string.Empty)" @onclick="e=>OpenMonth(option,6)"><div><a class="cell">六月</a></div></td>
                                        <td class="@(option.ShowMonth==7 ? "today":string.Empty)" @onclick="e=>OpenMonth(option,7)"><div><a class="cell">七月</a></div></td>
                                        <td class="@(option.ShowMonth==8 ? "today":string.Empty)" @onclick="e=>OpenMonth(option,8)"><div><a class="cell">八月</a></div></td>
                                    </tr>
                                    <tr>
                                        <td class="@(option.ShowMonth==9 ? "today":string.Empty)" @onclick="e=>OpenMonth(option,9)"><div><a class="cell">九月</a></div></td>
                                        <td class="@(option.ShowMonth==10 ? "today":string.Empty)" @onclick="e=>OpenMonth(option,10)"><div><a class="cell">十月</a></div></td>
                                        <td class="@(option.ShowMonth==11 ? "today":string.Empty)" @onclick="e=>OpenMonth(option,11)"><div><a class="cell">十一月</a></div></td>
                                        <td class="@(option.ShowMonth==12 ? "today":string.Empty)" @onclick="e=>OpenMonth(option,12)"><div><a class="cell">十二月</a></div></td>
                                    </tr>
                                </tbody>
                            </table>
                        }
                        else if (option.ShowYear > 0)
                        {
                            var yearIndex = 0;
                            <table class="el-year-table">
                                <tbody>
                                    @((MarkupString)"<tr>")
                                    @for (; beginYear <= endYear; beginYear++)
                                    {
                                        var currentYear = beginYear;
                                        var today = beginYear == option.ShowYear ? "today" : string.Empty;
                                    <td class="available @today" @onclick="@(e => { option.ShowYear = 0;option.CurrentMonth = new DateTime(currentYear, 1, 1); option.ShowMonth = 1; })">
                                        <a class="cell">@beginYear</a>
                                    </td>
                                    if (++yearIndex % 4 == 0 || beginYear == endYear)
                                    {
                                        @((MarkupString)"</tr>")
                                        if (beginYear != endYear)
                                        {
                                            @((MarkupString)"<tr>")
                                        }
                                    }
                                }
                                    </tbody>
                                </table>
                            }
                            else
                            {
                                <table cellspacing="0" cellpadding="0" class="el-date-table">
                                    <tbody>
                                        <tr>
                                            <th>日</th>
                                            <th>一</th>
                                            <th>二</th>
                                            <th>三</th>
                                            <th>四</th>
                                            <th>五</th>
                                            <th>六</th>
                                        </tr>

                                        @for (int weekIndex = 1; weekIndex <= 6; weekIndex++)
                                        {
                                            <tr class="el-date-table__row">
                                                @for (int dayOfWeek = 0; dayOfWeek <= 6; dayOfWeek++)
                                                {
                                                    currentRenderingDay++;
                                                    var dayCls = string.Empty;
                                                    var currentDay = default(DateTime);
                                                    if (weekIndex == 1)
                                                    {
                                                        var diffDays = dayOfWeek - dayOfWeekOfThisMonthStart.GetHashCode();
                                                        currentDay = dayOfThisMonthStart.AddDays(diffDays);
                                                        if (diffDays < 0)
                                                        {
                                                            dayCls += "prev-month";
                                                        }
                                                        else
                                                        {
                                                            dayCls += "available";
                                                            if (dayIndexOfMonthStart == 0)
                                                            {
                                                                dayIndexOfMonthStart = currentRenderingDay;
                                                            }
                                                        }
                                                    }
                                                    else
                                                    {
                                                        currentDay = dayOfThisMonthStart.AddDays(currentRenderingDay - dayIndexOfMonthStart);
                                                        if (currentDay.Month == month)
                                                        {
                                                            dayCls += "available";
                                                        }
                                                        else
                                                        {
                                                            dayCls += "available next-month";
                                                        }
                                                    }
                                                    if (currentDay == DateTime.Today)
                                                    {
                                                        dayCls += " today";
                                                    }
                                                    <td class="@dayCls" @onclick="e=>SelectDay(option, currentDay)">
                                                        <div>
                                                            <span>
                                                                @currentDay.Day
                                                            </span>
                                                        </div>
                                                    </td>
                                                }
                                            </tr>
                                        }
                                    </tbody>
                                </table>
                            }
                    </div>
                </div>
            </div>
            <div class="el-picker-panel__footer" style="display: none;">
                <button type="button" class="el-button el-picker-panel__link-btn el-button--text el-button--mini">
                    <span>
                        此刻
                    </span>
                </button><button type="button" class="el-button el-picker-panel__link-btn el-button--default el-button--mini is-plain">
                    <span>
                        确定
                    </span>
                </button>
            </div>
            <div x-arrow="" class="popper__arrow" style="left: 35px;"></div>
        </div>
        <div class="v-modal" tabindex="0" style="z-index: @shadowIndex;opacity:0;position:fixed;" @ref="@option.ShadowElement" @onclick="e=>CloseDateTimePicker(option)"></div>
    }

    for (int i = 0; i < SelectDropDownOptions.Count; i++)
    {
        var option = SelectDropDownOptions[i];
        var shadowIndex = option.ShadowZIndex;
        var index = option.ZIndex;
        var transform = "scaleY(0)";
        if (option.IsShow)
        {
            if (option.ShowStatus == AnimationStatus.Begin && !GlobalElementSettings.DisableAnimation)
            {
                transform = "scaleY(0)";
            }
            else
            {
                transform = "scaleY(1)";
            }
        }
        var style = "display:none";
        if (option.IsShow || GlobalElementSettings.DisableAnimation)
        {
            style = "";
        }
        var listClsBuilder = HtmlPropertyBuilder.CreateCssClassBuilder()
            .Add("el-scrollbar__view", "el-select-dropdown__list")
            .AddIf(option.IsTree, "blazor-dropdown-tree");
        <div class="v-modal" style="position:fixed;opacity:0;@style;z-index:@shadowIndex" @ref="option.ShadowElement" @onclick="async e=> await CloseDropDownAsync(option)"></div>
        <div class="el-select-dropdown el-popper" @ref="option.Element" style="width:@(option.Width)px;left:@(option.Left)px;top:@(option.Top)px; transition:transform 0.2s linear 0s; transform:@transform; position:absolute; transform-origin: center top 0px; z-index:@(index);" x-placement="bottom-start">
            <div class="el-scrollbar" style="">
                <div class="el-select-dropdown__wrap el-scrollbar__wrap">
                    <ul class="@listClsBuilder.ToString()">
                        @if (option.IsTree)
                        {
                            <CascadingValue Value="(BTreeSingleSelect)option.Select">
                                @option.OptionContent
                            </CascadingValue>
                        }
                        else
                        {
                            <CascadingValue Value="option">
                                @option.OptionContent
                            </CascadingValue>
                        }
                    </ul>
                </div>
                <div class="el-scrollbar__bar is-horizontal">
                    <div class="el-scrollbar__thumb" style="transform: translateX(0%);"></div>
                </div>
                <div class="el-scrollbar__bar is-vertical">
                    <div class="el-scrollbar__thumb" style="transform: translateY(0%);"></div>
                </div>
            </div>
            <div x-arrow="" class="popper__arrow" style="left: 35px;"></div>
        </div>
    }
    for (int i = 0; i < DropDownMenuOptions.Count; i++)
    {
        var option = DropDownMenuOptions[i];
        var shadowIndex = option.ShadowZIndex;
        var index = option.ZIndex;
        var transform = "scaleY(0)";
        if (option.IsShow)
        {
            if (option.ShowStatus == AnimationStatus.Begin && !GlobalElementSettings.DisableAnimation)
            {
                transform = "scaleY(0)";
            }
            else
            {
                transform = "scaleY(1)";
            }
        }
        var style = "display:none";
        if (option.IsShow || GlobalElementSettings.DisableAnimation)
        {
            style = "";
        }
        var dropDownStyles = new List<string>();
        dropDownStyles.Add($"left:{option.Left}px");
        dropDownStyles.Add($"top:{option.Top}px");
        dropDownStyles.Add("transition:transform 0.2s linear 0s");
        dropDownStyles.Add($"transform:{transform}");
        dropDownStyles.Add("position:absolute");
        dropDownStyles.Add("transform-origin: center top 0px");
        dropDownStyles.Add($"z-index:{index}");
        <div class="v-modal" style="position:fixed;opacity:0;@style;z-index:@shadowIndex" @ref="option.ShadowElement" @onclick="async e=> await CloseDropDownAsync(option)"></div>
        <ul class="el-dropdown-menu el-popper" @ref="option.Element" style="@string.Join(";",dropDownStyles)" x-placement="bottom-start">
            <CascadingValue Value="option">
                @option.OptionContent
            </CascadingValue>
            <div x-arrow="" class="popper__arrow" style="left: 35px;"></div>
        </ul>
    }
    for (int i = 0; i < SubMenuOptions.Count; i++)
    {
        var option = SubMenuOptions[i];
        var shadowIndex = option.ShadowZIndex;
        var index = option.ZIndex;
        var transform = "transform:scaleY(1);";
        var opacity = "1";
        if (option.IsShow)
        {
            if (option.ShowStatus == AnimationStatus.Begin)
            {
                transform = "transform:scaleY(0);";
                opacity = "0";
            }
            else
            {
                transform = "transform:scaleY(1);";
                opacity = "1";
            }
        }
        else
        {
            transform = "transform:scaleY(0);";
            opacity = "0";
        }
        <div class="el-menu--horizontal" @onmouseover="e=>KeepShowSubMenu(option)" @onmouseout="async e=>await ReadyCloseSubMenuAsync(option)" style="position: absolute; top: @(option.Top)px; left: @(option.Left)px; z-index:@index;@transform transition:transform 0.2s,opacity 0.2s;opacity:@opacity; transform-origin:top left;" x-placement="right-start">
            <ul role="menu" class="el-menu el-menu--popup el-menu--popup-bottom-start">
                <CascadingValue Value="option.SubMenu">
                    <CascadingValue Value="option.Options">
                        <CascadingValue Value="option.SubMenu.TopMenu">
                            @option.Content
                        </CascadingValue>
                    </CascadingValue>
                </CascadingValue>
            </ul>
        </div>
    }
}